<template>
  <div id="info" >
    <el-descriptions class="margin-top" title="个人信息" direction="horizontal" :column="3"  border v-loading="loading"
                     element-loading-text="拼命加载中">
          <template slot="extra">
            <el-button @click="addFormVisible=true" style="margin-left: 10px" type="primary" size="small">编辑</el-button>
            <el-dialog title="编辑个人信息" center :visible.sync="addFormVisible" width="40%" :close-on-click-modal="false"
                       @closed="close()" :lock-scroll="false" top="0" >
              <el-form :model="infoForm" ref="infoForm" :rules="rules" >

                <el-form-item label="头像" :label-width="formLabelWidth" prop="photoUrl">
                  <el-upload
                      ref="upload"
                      action="/api/upload/?ser=user"
                      :on-success="uploadSuccess"
                      :limit="1"
                      accept=".png, .jpg"
                      :auto-upload="true">
                    <i class="el-icon-upload"> 点击上传</i>
                  </el-upload>

                </el-form-item>

                <el-form-item label="昵称" :label-width="formLabelWidth" prop="pickName">
                  <el-input v-model="infoForm.pickName" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                  <el-radio v-model="infoForm.sex" label="男"></el-radio>
                  <el-radio v-model="infoForm.sex" label="女"></el-radio>
                </el-form-item>

                <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                  <el-input v-model="infoForm.age" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="手机号" :label-width="formLabelWidth" prop="tel">
                  <el-input v-model="infoForm.tel" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="电子邮箱" :label-width="formLabelWidth" prop="email">
                  <el-input v-model="infoForm.email" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="所在城市" :label-width="formLabelWidth" prop="liveCity">
                  <el-input v-model="infoForm.liveCity" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="担任职位" :label-width="formLabelWidth" prop="position">
                  <el-input v-model="infoForm.position" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="个人介绍" :label-width="formLabelWidth" prop="introduce">
                  <el-input  type="textarea" :row="50" v-model="infoForm.introduce" maxlength="150"   show-word-limit autocomplete="off" ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addInfoForm" style="width:20%">提 交</el-button>
              </div>
            </el-dialog>
          </template>
          <el-descriptions-item label="真实姓名">{{ this.user.realName }}</el-descriptions-item>
          <el-descriptions-item label="头像">
            <el-avatar :src="this.user.photoUrl"></el-avatar>
          </el-descriptions-item>
          <el-descriptions-item label="昵称">{{ this.user.pickName }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ this.user.sex }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ this.user.age }}</el-descriptions-item>
          <el-descriptions-item label="居住地">{{ this.user.liveCity }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ this.user.tel }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{this.user.email}}</el-descriptions-item>
          <el-descriptions-item label="所在公司">{{this.user.companyName}}</el-descriptions-item>
          <el-descriptions-item label="公司职位">{{this.user.position}}</el-descriptions-item>
          <el-descriptions-item label="个人介绍">{{this.user.introduce}}</el-descriptions-item>
    </el-descriptions>
  </div>

</template>

<script>
import {getPersonInfo, updatePersonInfo} from "../../network/companyUser";

export default {
  name: "PersonInfo",
  data() {
    return {
      user: {},
      loading:true,
      addFormVisible: false,
      infoForm: {
        userName:'',
        photoUrl:'',
        pickName: '',
        sex: '',
        age: '',
        tel: '',
        email: '',
        liveCity:'',
        position:'',
        introduce:''
      },
      fileList:[],
      rules: {
        tel: [{
          pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
          message: '请输入正确的手机号',
          trigger: 'blur'
        }],
        email:[{pattern:/^([a-zA-Z0-9]+[-_\\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,message:'请输入正确邮箱格式',trigger:'blur'}]
      },
      formLabelWidth: '100px',
    }
  },
  created() {
    this.personInfo();
  },
  methods: {
    personInfo() {
      getPersonInfo(localStorage.getItem("company_userName")).then(res => {
        this.loading=false;
        this.user = res.data.data;
      })
    },
    addInfoForm() {
      this.infoForm.userName = this.user.userName;
      console.log(this.infoForm);
      this.$refs.infoForm.validate((valid) => {
        if (valid) {
          updatePersonInfo(this.infoForm).then(res => {
            this.$message.success(res.data.data);
            this.personInfo();
          }).catch();

          this.addFormVisible = false;
        }
      })
    },
    close(){
      this.personInfo();
      this.$refs.infoForm.resetFields();
    },
    uploadSuccess(res){
      if(res.data!=undefined){
        this.infoForm.photoUrl=res.data;
        console.log(this.infoForm)
      }
    }
  }
}
</script>

<style scoped>
#info {
  width: 70%;
  margin: 90px auto 0;
}
</style>